// 通过id获得form元素对象
let form = document.getElementById('form')
// form元素对象监听表单提交事件
form.onsubmit = function () {
  console.log('form的submit事件触发了')
  // 验证用户名
  let res = validateUsername()
  if (!res) {
    return
  }
  // 验证密码
  res = validatePassword()
  if (!res) {
    return
  }
  // 验证重复密码
  res = validateRepass()
  if (!res) {
    return
  }
  console.log(res)
}

// 验证重复密码
function validateRepass() {
  // 获得input框元素
  let inputRePass = document.getElementsByClassName('repass')[0]
  // 获得重复密码
  let valueRepass = inputRePass.value
  // 验证是否是空
  if (isEmptyString(valueRepass)) {
    alert('重复密码不能为空，请重新填写')
    return false
  }
  // 验证长度
  if (valueRepass.length < 6) {
    alert('重复密码的长度不能小于6位，请重新填写')
    return false
  }
  // 验证是否和原密码相同
  let input = document.getElementsByClassName('password')[0]
  if (input.value !== valueRepass) {
    alert('重复密码输入不一致，请重新填写')
    return false
  }
  return true
}

// 验证密码
function validatePassword() {
  // 获得input框元素
  let input = document.getElementsByClassName('password')[0]
  // 获得密码
  let password = input.value
  // 验证是否是空
  if (isEmptyString(password)) {
    alert('密码不能为空，请重新填写')
    return false
  }
  // 验证长度
  if (password.length < 6) {
    alert('密码的长度不能小于6位，请重新填写')
    return false
  }
  return true
}

// 验证用户名
function validateUsername() {
  // 获得input框元素
  let input = document.getElementsByClassName('username')[0]
  // 获得用户名，如果input没有输入值value=''
  let username = input.value
  console.log('$' + username + '$')
  if (isEmptyString(username)) {
    alert('用户名不能为空，请重新填写')
    return false
  }
  return true
}

// 表单重置事件及回调函数，点击reset按钮时触发
form.onreset = function () {
  console.log('form的reset事件触发了')
}
